<%page args="section_data" expression_filter="h"/>
<%namespace name='static' file='../../static_content.html'/>

<%!
from django.utils.translation import gettext as _
from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_string
%>

<%static:require_module_async module_name="js/certificates/factories/certificate_allowlist_factory" class_name="CertificateAllowlistFactory">
    CertificateAllowlistFactory(${certificate_allowlist | n, dump_js_escaped_json}, '${generate_certificate_exceptions_url | n, js_escaped_string}', '${certificate_exception_view_url | n, js_escaped_string}', '${generate_bulk_certificate_exceptions_url | n, js_escaped_string}', ${bool(section_data['active_certificate']) | n, dump_js_escaped_json});
</%static:require_module_async>

<%static:require_module_async module_name="js/certificates/factories/certificate_invalidation_factory" class_name="CertificateInvalidationFactory">
    CertificateInvalidationFactory('${certificate_invalidations | n, dump_js_escaped_json}', '${certificate_invalidation_view_url | n, js_escaped_string}');
</%static:require_module_async>

<div class="certificates-wrapper">

    <div class="example-certificates">
        % if not section_data['html_cert_enabled']:
        <h3 class="hd hd-3">${_('Example Certificates')}</h3>

        <div class="generate-example-certificates-wrapper">
            <p class="under-heading">
                ${_('This course is configured to generate PDF certificates and this certificate type is no longer supported. Example certificates cannot be generated.')}
            </p>
            <!--
            The endpoint called to generate example certificates has been removed. The form that previously called this endpoint has been
            replaced with a (permanently disabled) button. Further cleanup of the Instructor Dashboard will be handled in MICROBA-1415
            (as part of DEPR-157 and the MICROBA-1265 Epic that will remove the remaining PDF certificate viewing code in edx-platform).
            -->
            <button class="is-disabled">${_('Generate Example Certificates')}</button>
        </div>
        % endif

        % if section_data['example_certificate_status'] is not None:
        <div class="example-certificate-status-wrapper">
            <p>${_("Status:")}</p>
            <ul>
            % for cert_status in section_data['example_certificate_status']:
                % if cert_status['status'] == 'started':
                    <li>${_('Generating example {name} certificate').format(name=cert_status['description'])}</li>
                % elif cert_status['status'] == 'error':
                    <li>${_('Error generating example {name} certificate: {error}').format(name=cert_status['description'], error=cert_status['error_reason'])}</li>
                % elif cert_status['status'] == 'success':
                    <li><a href="${cert_status['download_url']}">${_('View {name} certificate').format(name=cert_status['description'])}</a></li>
                </li>
                % endif
            % endfor
            </ul>
            <button class="btn-blue" id="refresh-example-certificate-status">${_("Refresh Status")}</button>
        </div>
        % endif
    </div>

    % if not section_data['is_self_paced']:
    <hr />

    <div class="enable-certificates">
        <h3 class="hd hd-3">${_("Student-Generated Certificates")}</h3>
        % if section_data['enabled_for_course']:
            <form id="enable-certificates-form" method="post" action="${section_data['urls']['enable_certificate_generation']}">
                <input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}">
                <input type="hidden" id="certificates-enabled" name="certificates-enabled" value="false" />
                <input type="submit" class="btn-blue" id="disable-certificates-submit" value="${_('Disable Student-Generated Certificates')}"/>
            </form>
        % elif section_data['can_enable_for_course']:
            <form id="enable-certificates-form" method="post" action="${section_data['urls']['enable_certificate_generation']}">
                <input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}">
                <input type="hidden" id="certificates-enabled" name="certificates-enabled" value="true" />
                <input type="submit" class="btn-blue" id="enable-certificates-submit" value="${_('Enable Student-Generated Certificates')}"/>
            </form>
        % else:
            <p class="under-heading">
                ${_("You must successfully generate example certificates before you enable student-generated certificates.")}
            </p>
            <button class="is-disabled" disabled>${_('Enable Student-Generated Certificates')}</button>
        % endif
    </div>
    % endif

    % if section_data['instructor_generation_enabled'] and not (section_data['enabled_for_course'] and section_data['html_cert_enabled']):
    <hr class="section-divider" />

    <div class="start-certificate-generation">
        <h3 class="hd hd-3">${_("Generate Certificates")}</h3>
        <form id="certificates-generating-form" method="post" action="${section_data['urls']['start_certificate_generation']}">
            % if section_data['html_cert_enabled'] and section_data['active_certificate'] is None:
                <p>${_("Course certificate generation requires an activated web certificate configuration.")}</p>
                <input type="button" id="disabled-btn-start-generating-certificates" class="is-disabled" aria-disabled="true" value="${_('Generate Certificates')}"/>
            % else:
                <p class="under-heading">
                    ${_("When you are ready to generate certificates for your course, click Generate Certificates. You do not need to do this if you have set the certificate mode to on-demand generation.")}
                </p>
                <input type="button" class="btn-blue" id="btn-start-generating-certificates" value="${_('Generate Certificates')}" data-endpoint="${section_data['urls']['start_certificate_generation']}"/>
            %endif
        </form>
        <div class="certificate-generation-status"></div>
    </div>

        %if settings.FEATURES.get('ENABLE_INSTRUCTOR_BACKGROUND_TASKS'):
        <div class="running-tasks-container action-type-container">
            <hr>
            <h3 class="hd hd-3"> ${_("Pending Tasks")} </h3>
            <div class="running-tasks-section">
                <p>${_("The status for any active tasks appears in a table below.")} </p>
                <br />
                <div class="running-tasks-table" data-endpoint="${ section_data['urls']['list_instructor_tasks_url'] }"></div>
            </div>
            <div class="no-pending-tasks-message"></div>
        </div>
        %endif
    % endif

    <hr>
    <div class="start-certificate-regeneration">
        <h3 class="hd hd-3">${_("Regenerate Certificates")}</h3>
        <form id="certificate-regenerating-form" method="post" action="${section_data['urls']['start_certificate_regeneration']}">
            <p class="under-heading">
                ${_('To regenerate certificates for your course, choose the learners who will receive regenerated certificates and click Regenerate Certificates.')}
            </p>
            <fieldset>
                <legend class="sr">${_('Choose learner types for regeneration')}</legend>
                <div>
                    <label>
                        <input id="certificate_status_${section_data['status'].downloadable}" type="checkbox" name="certificate_statuses" value="${section_data['status'].downloadable}">
                        ${_("Regenerate for learners who have already received certificates. ({count})").format(count=section_data['certificate_statuses_with_count'].get(section_data['status'].downloadable, 0))}
                    </label>
                </div>
                <div>
                    <label>
                        <input id="certificate_status_${section_data['status'].notpassing}" type="checkbox" name="certificate_statuses" value="${section_data['status'].notpassing}">
                        ${_("Regenerate for learners who have not received certificates. ({count})").format(count=section_data['certificate_statuses_with_count'].get(section_data['status'].notpassing, 0))}
                    </label>
                </div>
                <div>
                    <label>
                        <input id="certificate_status_${section_data['status'].audit_passing}" type="checkbox" name="certificate_statuses" value="${section_data['status'].audit_passing}">
                        ${_("Regenerate for learners with audit passing state. ({count})").format(count=section_data['certificate_statuses_with_count'].get(section_data['status'].audit_passing, 0))}
                    </label>
                </div>
                <div>
                    <label>
                        <input id="certificate_status_${section_data['status'].audit_notpassing}" type="checkbox" name="certificate_statuses" value="${section_data['status'].audit_notpassing}">
                        ${_("Regenerate for learners with audit not passing state. ({count})").format(count=section_data['certificate_statuses_with_count'].get(section_data['status'].audit_notpassing, 0))}
                    </label>
                </div>
                <div>
                    <label>
                        <input id="certificate_status_${section_data['status'].error}" type="checkbox" name="certificate_statuses" value="${section_data['status'].error}">
                        ${_("Regenerate for learners in an error state. ({count})").format(count=section_data['certificate_statuses_with_count'].get(section_data['status'].error, 0))}
                    </label>
                </div>
            </fieldset>
            <input type="button" class="btn-blue" id="btn-start-regenerating-certificates" value="${_('Regenerate Certificates')}" data-endpoint="${section_data['urls']['start_certificate_regeneration']}"/>
        </form>
        <div class="certificate-regeneration-status"></div>
    </div>

    <hr>
    <div class="certificate-generation-history">
        <h3 class="hd hd-3 title">${_("Certificate Generation History")}</h3>
        <div class="certificate-generation-history-content">
            <table>
                <thead>
                <tr>
                    <th class="task-name" scope="col">${_('Task name')}</th>
                    <th class="task-date" scope="col">${_('Date')}</th>
                    <th class="task-details" scope="col">${_('Details')}</th>
                </tr>
                </thead>
                <tbody>
                % for history in section_data['certificate_generation_history']:
                    <tr>
                        <td>${history.get_task_name().title()}</td>
                        <td>${history.created.strftime("%B %d, %Y")}</td>
                        <td>${history.get_certificate_generation_candidates()}</td>
                    </tr>
                % endfor
                </tbody>
            </table>
        </div>
    </div>

    <div class="certificate-exception-container">
        <hr class="section-divider">
        <h3 class="hd hd-3"> ${_("SET CERTIFICATE EXCEPTIONS")} </h3>
         <p class="under-heading info">
             ${_("Set exceptions to generate certificates for learners who did not qualify for a certificate but have " \
              "been given an exception by the course team. After you add learners to the exception list, click Generate " \
              "Exception Certificates below.")}
         </p>
        <div class="certificate-exception-section">
            <div id="certificate-allowlist-editor"></div>
            <div class="bulk-allowlist-exception"></div>
            <div class="allowlisted-students" id="allowlisted-students">
                <div class="ui-loading">
                    <span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_('Loading')}</span>
                </div>
            </div>
            <br/>
        </div>
        <div class="no-pending-tasks-message"></div>
    </div>

    <hr class="section-divider" />

    <div class="certificate-invalidation-container">
        <h3 class="hd hd-3"> ${_("Invalidate Certificates")} </h3>
        <div id="certificate-invalidation">
            <div class="ui-loading">
                <span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_('Loading')}</span>
            </div>
        </div>
    </div>

</div>
